<template>
  <div class="user">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索框 -->
    <div>
       <el-input
         placeholder="请输入内容"
         v-model="search"
         class="search-input" @keydown.13.native="searchUser">
         <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
       </el-input>
       <el-button type="primary" plain @click="addFormVisible = true">添加用户</el-button>
    </div>
    <!-- 表格 -->
    <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%">
        <el-table-column
          type="index">
        </el-table-column>
        <el-table-column
          property="username"
          label="姓名">
        </el-table-column>
        <el-table-column
          property="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          property="mobile"
          label="电话">
        </el-table-column>
        <el-table-column
          label="用户状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              active-color="#13ce66"
              inactive-color="#ff4949" @change="toggleStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="300">
          <template slot-scope="scope">
            <el-button plain type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
            <el-button plain type="warning" icon="el-icon-delete" @click="delUser(scope.row)"></el-button>
            <el-button plain type="danger" icon="el-icon-check" @click="handleRole(scope.row)"></el-button>
          </template>
        </el-table-column>
    </el-table>
      <!-- 分页 -->
    <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="getTable.pagenum"
         :page-size="getTable.pagesize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
    </el-pagination>
    <!-- 增加用户框 -->
    <el-dialog title="添加用户" :visible.sync="addFormVisible">
      <el-form :model="addForm" :rules="rules" ref="addForm">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
           <el-input v-model="addForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
           <el-input v-model="addForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
           <el-input v-model="addForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
           <el-input v-model="addForm.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑用户框 -->
    <el-dialog title="编辑用户" :visible.sync="editFormVisible">
      <el-form :model="editForm">
        <el-form-item label="用户名" :label-width="formLabelWidth">
           <el-input v-model="editForm.username" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
           <el-input v-model="editForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
           <el-input v-model="editForm.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分配角色框 -->
    <el-dialog title="分配角色" :visible.sync="roleFormVisible">
      <el-form :model="roleForm">
        <el-form-item label="当前用户" :label-width="formLabelWidth">
           <span>{{roleForm.username}}</span>
        </el-form-item>
        <el-form-item label="请选择角色" :label-width="formLabelWidth">
            <el-select v-model="roleForm.role" placeholder="请选择">
              <el-option :label="item.roleName" :value="item.id" v-for="item in roleList" :key = "item.id"></el-option>
            </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="roleUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getUserData, addUser, delUser, editUser, toggleUser, getRole, roleUser } from '@/api'
export default {
  created () {
    this.initTable()
  },
  data () {
    return {
      // 搜索框
      search: '',
      // 分页
      total: -1,
      // 表格
      tableData: [],
      getTable: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      // 增加用户框
      addFormVisible: false,
      addForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 编辑用户框
      editFormVisible: false,
      editForm: {
        id: -1,
        username: '',
        email: '',
        mobile: ''
      },
      // 角色分配框
      roleFormVisible: false,
      roleList: [],
      roleForm: {
        id: -1,
        username: '',
        role: ''
      },
      formLabelWidth: '120px',
      rules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 初始化表格数据
    initTable () {
      getUserData(this.getTable)
        .then(res => {
          this.tableData = res.data.users
          this.total = res.data.total
        })
    },
    // 分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    // 增加用户
    addUser () {
      this.$refs['addForm'].validate(isPass => {
        if (isPass) {
          addUser(this.addForm)
            .then(res => {
              if (res.meta.status === 201) {
                this.$message.success(res.meta.msg)
                this.addFormVisible = false
                this.initTable()
                this.addForm.username = ''
                this.addForm.password = ''
                this.addForm.email = ''
                this.addForm.mobile = ''
              } else {
                this.$message.info(res.meta.msg)
              }
            })
        } else {
          this.$message.warning('请正确填写表单')
        }
      })
    },
    // 删除用户
    delUser (row) {
      delUser(row.id)
        .then(res => {
          if (res.meta.status === 200) {
            this.$message.success(res.meta.msg)
            this.initTable()
          } else {
            this.$message.info(res.meta.msg)
          }
        })
    },
    // 编辑用户
    handleEdit (row) {
      this.editFormVisible = true
      this.editForm.id = row.id
      this.editForm.username = row.username
      this.editForm.email = row.email
      this.editForm.mobile = row.mobile
    },
    editUser () {
      editUser(this.editForm)
        .then(res => {
          if (res.meta.status === 200) {
            this.$message.success(res.meta.msg)
            this.editFormVisible = false
            this.initTable()
          } else {
            this.$message.info(res.meta.msg)
          }
        })
    },
    // 查询用户
    searchUser () {
      this.getTable.query = this.search
      this.initTable()
      this.search = ''
    },
    // 开关状态切换
    toggleStatus (row) {
      toggleUser(row.id, row.mg_state)
        .then(res => {
          this.$message.success(res.meta.msg)
        })
    },
    // 角色分配
    handleRole (row) {
      this.roleFormVisible = true
      this.roleForm.id = row.id
      this.roleForm.username = row.username
      this.roleForm.role = row.role_name
      getRole()
        .then(res => {
          this.roleList = res.data
        })
    },
    roleUser () {
      if (typeof this.roleForm.role === 'string') {
        this.roleFormVisible = false
        return false
      } else {
        roleUser(this.roleForm.id, this.roleForm.role)
          .then(res => {
            if (res.meta.status === 200) {
              this.$message.success(res.meta.msg)
              this.roleFormVisible = false
              this.initTable()
            } else {
              this.$message.info(res.meta.msg)
            }
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  background-color: #F5F5F5;
  height: 30px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 30px;
  margin-bottom: 15px;
}
.user {
  .search-input {
    width: 300px;
    margin-right: 10px;
    margin-bottom: 15px;
  }
}
.el-pagination{
  background-color: #fff;
  margin-top: 15px;
}
</style>
